<template>
    <div class="search">
        <div class="query">
            <div class="hanleSearch">
                <van-search
                    v-model="msg"
                    show-action
                    autofocus="true"
                    placeholder="请输入搜索关键词"
                    @cancel="handleChangePage"
                />
            </div>
            <!-- <button @click="handleChangePage">取消</button> -->
            <div v-show="msg">
                <div v-if="searchDataList.length">
                    <ul>
                         <!-- <li v-for="item in searchDataList" :key="item.cinemaId">
                        <h4>{{item.name}}</h4> 
                        <p>{{item.address}}</p>
                    </li> -->
                    <CinemaItem v-for="item in searchDataList" :key="item.cinemaId" :item="item"></CinemaItem>
                    </ul>
                </div>
                <div v-else class="empty-result">
                    <img src="" alt="">
                    <p>没有找到匹配的影院</p>
                    <p class="empty-list-tip">提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？ </p>
                </div>
            </div>
        </div>

        <div class="distance" v-show="!msg">
            <div class="cinema-index-title">离你最近</div>
            <ul class="cinema-index-detail">
                <li v-for="item in topDateList" :key="item.cinemaId" class="cinema-item-detail">
                    <div class="cinema-item-text">{{item.name}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import CinemaItem from '../Cinema/CinemaItem'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
import Vue from 'vue';
import { Search } from 'vant';

Vue.use(Search);
export default {
    components:{
        CinemaItem
    },
    data(){
        return{
            msg:""
        }
    },
    computed:{
        // topDateList(){
        //     return this.dataList.splice(0,5)
        // },
        ...mapState('cinema',['dataList']),
        ...mapGetters('cinema',['topDateList']),
        searchDataList(){
            return this.dataList.filter(item=>item.name.includes(this.msg)
            || item.name.toUpperCase().includes(this.msg.toUpperCase())
            ||item.name.toLowerCase().includes(this.msg.toLowerCase())
            )
        }
    },
    mounted(){
        // this.isTabbarShow=false
        // this.$store.commit("tabbar/hide")
        this.hide()
    },
    destroyed(){
        // this.isTabbarShow=true
        // this.$store.commit("tabbar/show")
        this.show()
    },
    created(){
        if(this.dataList.length>0){
            console.log("search里面的vuex电影院数据")
        }else{
            // this.$store.dispatch("cinema/getCinemaActions")
            this.getCinemaActions()
        }   
    },
    methods:{
        ...mapActions('cinema',['getCinemaActions']),
        ...mapMutations('tabbar',['hide','show']),
        handleChangePage(){
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
*{margin: 0;padding: 0;}
.hanleSearch{
    width: 400px;
     margin-left: 50px;
}
.pt{
    width: 400px;
    height: 20px;
    margin-left: 50px;
    border-radius: 30px;
    color: #bdc0c5;
    border: 1px solid #bdc0c5;
    outline: none;
}
.cinema-index-title{
        font-size: 13px;
    line-height: 13px;
    color: #bdc0c5;
    margin: 18px 0;
}
ul{
    list-style: none;
}
.cinema-index-detail{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    .cinema-item-detail{
        text-align: center;
        padding-bottom: 10px;
        padding-right: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        .cinema-item-text{
             height: 30px;
            background-color: hsla(0,0%,96%,.6);
            line-height: 14px;
            border-radius: 3px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 13px;
            padding: 8px 12px;

        }
    }
}
.empty-result{
    position: absolute;
    top: 107px;
    width: 100%;
    text-align: center;
    img{
        width: 90px;
    margin: auto;
    }
    p{
            color: #bdc0c5;
    font-size: 14px;
    margin: 0;
    }
    .empty-list-tip{
        font-size: 11px;
    padding: 0 22vw;
    }
}
</style>
